<template>
    <div class="vginfoItemRoot">
        <div class="ctx">
            <div class="item_img"><img class="img" :src="d.img" alt=""></div>
            <view class="item_ctx">
                <view class="i_head"><text class="i_name">{{ d.name }}</text>
                    <view @click="additem()" class="i_add shopping_cart">加购&#xe640;</view>
                </view>
                <view class="i_foot">
                    <view class="i_money"><text>{{ '￥ ' + moneyFormat(d.price) }}</text></view>
                    <view class="i_much"><xxl-num-box @change="change" min="1" :val="much"></xxl-num-box>
                    </view>
                </view>
            </view>
        </div>
    </div>
</template>

<script>
import api from '../api';

export default {
    name: 'WorkspaceJsonItem',

    data() {
        return {
            much: 1
        };
    },

    props: {
        f: {
            default: {
                name: "夕夕小菜店",
                id: "xxxiaodianss",
            }
        },
        d: {
            default: {
                name: "菠菜",
                id: "asdfasf",
                price: 0.2,
                img: "",
            }
        }
    },
    mounted() {

    },

    methods: {
        change(much) {
            this.much = much
        },
        additem() {
            this.$store.commit('addItem', {
                ...this.f,
                checked: false,
                data: [{
                    checked: false,
                    ...this.d,
                    much: this.much
                }]
            })
            // api.addShop([{
            //     goodsId:this.d.id,
            //     count:this.much
            // }])
            this.$emit('showHint');

        }
    },
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

@font-face {
    font-family: "shopping_cart";
    /* Project id 4017985 */
    src: url('iconfont.ttf?t=1681555568500') format('truetype');
}

.shopping_cart {
    font-family: "shopping_cart" !important;
    font-size: 25px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ctx {
    display: flex;
    border-radius: 15px;
    padding: 15px;
    box-sizing: border-box;
    background: $uni-text-color-inverse;
}

.item_img {
    width: 80px;
    height: 80px;
    background: gray;

    .img {
        width: 100%;
        height: 100%;
    }
}

.item_ctx {
    display: flex;
    width: calc(100% - 80px);
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 10px;

}

.i_head {
    width: 100%;
    display: flex;
}

.i_name {
    width: calc(100% - 80px);
}

.i_add {
    color: $uni-color-primary;
}

.i_foot {
    display: flex;
    justify-content: space-between;
}

.i_money {
    color: orangered;
}
</style>